<template>
    <div class="pages apply">
      <div class="g-container" id="container">
        <img src="../../assets/banner.png" alt="banner" class="banner">
        <div class="colorf234"></div>
        <!--{{device}}-->
          <tab :line-width="2" custom-bar-width="60px"  v-if='six'>
            <tab-item selected  @on-item-click="onItemClick('downld')">模板下载</tab-item>
            <tab-item @on-item-click="onItemClick('apply')">物料申请</tab-item>
          </tab>
          <div class="downld" v-if='tabs'>
            <div class="alipay" v-if='device=="alipay"'>
              <p>支付宝扫码领票模板</p>
              <img src="../../assets/img-alipay.png" alt="">
              <div class="appdl" @click="dload('alipay')">桌牌下载</div>
              <p class="jilu"><a href="#/list">申请记录</a></p>
            </div>
            <div class="wechat" v-else>
              <p>微信扫码领票模板</p>
              <img src="../../assets/img-wechat.png" alt="">
              <div class="appdl" @click="dload('wechat')" >桌牌下载</div>
              <p class="jilu"><a href="#/list">申请记录</a></p>
            </div>
          </div>
          <div class="apply" v-else>
            <form action="/">
              <group class="nuim-cells weui-cells" label-width="105px" label-margin-right="0em">
                <div class="nuim-cell">
                  <div class="nuim-cell-hd"><label >物料名称</label></div>
                  <div class="nuim-cell-bd">{{form.name}}</div>
                </div>
                <x-number title="申请数量" align="left" v-model="form.count" button-style="round" :min="1" :max="10" ></x-number>
                <!--<x-input title="申请数量" v-model.trim="form.count" :show-clear='showClear1' @on-focus='iptfocus("count")' @on-blur='iptblur' placeholder="请输入申请数量"></x-input>-->
                <x-input title="收货人" v-model.trim="form.person" :show-clear='showClear2' @on-focus='iptfocus("person")' @on-blur='iptblur("person",form.person)' placeholder="请输入收货人姓名" ref="person" ></x-input>
                <x-input title="联系电话" v-model.trim="form.tel" type='tel' :show-clear='showClear3' @on-focus='iptfocus("tel")' @on-blur='iptblur("tel",form.tel)' placeholder="请输入联系电话" :max='20' ref="tel"></x-input>
                <x-address title="地址选择" v-model="form.area" raw-value :list="addressData" value-text-align="left"></x-address>
                <x-input title="详细地址" v-model.trim="form.addr" :show-clear='showClear4' @on-focus='iptfocus("addr")' @on-blur='iptblur("addr",form.addr)' placeholder="请输入详细地址" ref="addr"></x-input>
              </group>
              <div class="nuim-btn-area">
                <input class="nuim-btn" :class="{'nuim-btn-disabled':disabled}" type="submit"  @click="clickBtn" value="下一步">
                <p class="jilu"><a href="#/list">申请记录</a></p>
              </div>
            </form>
          </div>
      </div>
    </div>
</template>
<script>
import { Group ,XInput,Tab, TabItem ,XNumber,ChinaAddressData, XAddress } from 'vux';
import qs from 'Qs'
import store from 'storejs';
export default {
  name: 'apply',
  components:{
    Group, XInput,Tab, TabItem ,XNumber, XAddress
  },
  data () {
    return {
      title:'',
      device:'',
      tabs:true,
      six:true,
      showClear1:false,
      showClear2:false,
      showClear3:false,
      showClear4:false,
      addressData: ChinaAddressData,
      form:{
        name:"桌牌",
        area: ['浙江省','杭州市','西湖区'],
        count:1,
        person:'',
        tel:'',
        addr:'',
      },
    }
  },
  created: function(){
    var device = store('device');
    var infoT = store('infoT');
    console.log(infoT.code)
    if(device){
      this.device = device;
    }
    if(infoT.code){
      this.six = true;
      this.tabs = true;
    }else{
      this.tabs = false;
      this.six = false;
    }

  },
  computed:{
		disabled(){
			return  !(this.form.person!=''&& this.form.tel!=''&&this.form.addr!='' )?true:false;
		}
  },
  methods:{
    onItemClick(val){
      // console.log(val);
      if(val =='apply'){
        this.tabs = false;
      }else{
        this.tabs = true;
      }
    },
    iptfocus(a){
      var that = this
      setTimeout(function() {
        switch (a) {
          case "count":
            that.showClear1 = true
            break;
          case "person":
            that.showClear2 = true
            break;
          case "tel":
            that.showClear3 = true
            break;
          case "addr":
            that.showClear4 = true
            break;
          default:
            break;
        }
      }, 2);
    },
    iptblur(a,b){
      var that = this;
      switch (a) {
          case "person":
            if(b<1){
              this.$vux.toast.show({
                type:'text',
                width:'70%',
                text: '请输入收件人姓名'
              });
              this.$refs.person.focus();
            }
            // console.log('person')
            break;
          case "tel":
            var regtel = /^[0-9]{6,20}$/;
            if(!regtel.test(b)){
              event.preventDefault();
              this.$vux.toast.show({
                type:'text',
                width:'70%',
                text: '请输入联系电话'
              });
              this.$refs.tel.focus();
            }
            console.log('tel')
            break;
          case "addr":
            if(!b){
              event.preventDefault();
              this.$vux.toast.show({
                type:'text',
                width:'70%',
                text: '请输入详细地址'
              });
              this.$refs.addr.focus();
            }
            console.log('addr')
            break;
          default:
            break;
        }
      setTimeout(function() {
        that.showClear1 = false
        that.showClear2 = false
        that.showClear3 = false
        that.showClear4 = false
        that.showClear5 = false
      }, 1);
     
    },
    dload(val){
      console.log(val)
    },
    clickBtn:function(){
      if(!this.disabled){
        this.$vux.toast.show({
          type:'text',
          width:'70%',
          text: '1'
        });
      }else{
        event.preventDefault();
        this.$vux.toast.show({
          type:'text',
          width:'70%',
          text: '请填写收货人信息'
        });
      }
    }
  }
}
</script>

<style scoped lang="less">
.apply{ 
  min-height: 100%;
  background: #fff;
  .nuim-btn{
    outline: 0 none;
    border: 0 none;
    width: 100%;
  }
  .banner{
    width: 100%;
    vertical-align: bottom;
  }
  .colorf234{
    height: 10px;
    background: #f2f3f4;
  }
  .downld{
    background: #fff;
    text-align: center;
    padding-top:12px;
    p{
      font-size: 16px;
      color: #4A4A4A;
      padding-bottom: 12px;
    }
    .appdl{
      background: #F8F8F8;
      border: 1px solid #CCCCCC;
      border-radius: 3px;
      outline: none;
      display: block;
      width:90%;
      line-height: 45px;
      font-size: 18px;
      color: #646464;
      margin: 15px 0 0 5%;
    }
  }
  .weui-cells {
    margin-top:-1px!important;
  }
  .nuim-cells .nuim-cell .nuim-cell-bd{
    line-height: 22px;
  }
}
</style>
<style>
.vux-number-round .vux-number-selector-sub, 
.vux-number-round .vux-number-selector-plus{
    padding: 2px;
    border: 1px solid #119EDD!important;
    text-align: center;
  }
  .vux-number-selector 
  svg{
    fill: #119EDD!important;
  }
  .vux-number-selector.vux-number-disabled 
  svg {
    fill: #ccc!important;
  }
  .vux-number-round 
  .vux-number-selector.vux-number-disabled {
    border-color: #ececec!important;
  }
  .vux-popup-picker-header{
        color: #119EDD!important;
  }
</style>
